---
title: "Theme Parts"
---

Parts contain the CSS styles for a single feature like icons or text inputs.

Using parts you can, for example, select a text input style that matches you application, or disable our provided text input styles so that you can write your own.

## Configuring Theme Parts

To add a part to a theme, call the `theme.withPart(...)` method which returns a new theme using that part. A theme can only have one part for a given feature, so for example because all color scheme parts have `feature: "colorScheme"`, adding a new color scheme to a theme will remove any existing part.

```js
import { themeQuartz, colorSchemeDark, iconSetMaterial } from 'ag-grid-community';

// withPart() returns a new theme and calls can be chained
const myTheme = themeQuartz
    .withPart(iconSetMaterial)
    .withPart(colorSchemeDark);
```

This example demonstrates mixing and matching any built-in theme, icon set, and color scheme:

{% gridExampleRunner title="Configuring Theme Parts" name="configuring-theme-parts" /%}

## Parts Reference

The following parts are available:

* `colorScheme` feature:
    * `colorSchemeVariable` - the default color scheme for all our [built-in themes](./themes/#built-in-themes). By default it appears light, but can be adjusted using [theme modes](./theming-colors/#theme-modes).
    * `colorSchemeLight` - neutral light scheme
    * `colorSchemeLightCold` - light scheme with subtle cold tint used by Balham theme
    * `colorSchemeLightWarm` - light scheme with subtle warm tint
    * `colorSchemeDark` - neutral dark scheme
    * `colorSchemeDarkBlue` - our preferred dark scheme used on this website
    * `colorSchemeDarkWarm` - dark scheme with subtle warm tint
    * `colorSchemeDarkWarm` - dark scheme with subtle warm tint
* `iconSet` feature:
    * `iconSetQuartz` - our default icon set
        * `iconSetQuartz({strokeWidth: number})` you can call iconSetQuartz as a function to provide a custom stroke width in pixels (the default is 1.5)
        * `iconSetQuartzLight` and `iconSetQuartzBold` preset lighter and bolder versions of the Quartz icons with 1px and 2px stroke widths respectively.
    * `iconSetMaterial` - the Material Design icon set
    * `iconSetAlpine` - the icon set used by the Alpine theme
    * `iconSetBalham` - the icon set used by the Balham theme
* `buttonStyle` feature:
    * `buttonStyleBase` - unstyled buttons with many parameters to configure their appearance
    * `buttonStyleQuartz` - buttons styled as per the Quartz theme
    * `buttonStyleAlpine` - buttons styled as per the Alpine theme
    * `buttonStyleBalham` - buttons styled as per the Balham theme
* `columnDropStyle` feature - controls the styling of column drop zone in the [columns tool panel](./tool-panel-columns/):
    * `columnDropStylePlain` - undecorated drop zone as used by Balham and Material themes
    * `columnDropStyleBordered` - drop zone with a dashed border around it as used by the Quartz and Alpine themes.
* `checkboxStyle` feature:
    * `checkboxStyleDefault` - checkbox style used by our themes. There is only one style provided which is configurable through parameters. It being a part allows you to replace it with your own checkbox styles if desired.
* `inputStyle` feature:
    * `inputStyleBase` - unstyled inputs with many parameters to configure their appearance
    * `inputStyleBordered` - inputs with a border around them
    * `inputStyleUnderlined` - inputs with a line underneath them as used in Material Design
* `tabStyle` feature:
    * `tabStyleBase` - unstyled tabs with many parameters to configure their appearance
    * `tabStyleQuartz` - tabs styled as per the Quartz theme
    * `tabStyleMaterial` - tabs styled as per the Material theme
    * `tabStyleAlpine` - tabs styled as per the Alpine theme
    * `tabStyleRolodex` - tabs designed to imitate paper cards, as used by the Balham theme
* `styleMaterial` feature (used by the Material theme):
    * `styleMaterial` - Adds the `primaryColor` parameter defined by [Material Design v2](https://m2.material.io/) and uses this color instead of the `accentColor` for most colored elements. `accentColor` is still used for checked checkboxes and to highlight active filters. This part also applies some adjustments to appearance of elements to match the Material Design specification, e.g. making all button text uppercase.

## Removing a Part

To remove a part from a theme, call `theme.withoutPart(featureName)`, which returns a new theme without the specified part:

```js
const myCustomTheme = themeQuartz.withoutPart('checkboxStyle');
```

After removing the built-in part, this example uses CSS in a separate style sheet to style the checkboxes:

{% gridExampleRunner title="Configuring Theme Parts" name="removing-parts" /%}

The above example uses `theme.withoutPart("checkboxStyle")` to disable the default checkbox styles and adds its own checkbox styles in the application style sheet. This is the simplest way of changing the appearance of the grid when you are working on a single application.

## Creating Your Own Parts

You can create your own theme parts to use in your application. This is useful for organisations with multiple apps that share common styles or a design system, see [Distributing Shared Themes & Parts](./theming-distribution/#creating-your-own-parts).